<script setup>
// import HelloWorld from './components/HelloWorld.vue'
// import {ref,reactive,onMounted } from 'vue'; 
// import * as THREE from 'three';
// import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// import dat from 'dat.gui'
//  const boxChange=(value)=>{
//   console.log(value);
//   // te.value =value
//  }
//  let te =ref(true)
//  const changes=(value)=>{
//   // te.value=!te.value
//   console.log(te.value);
//  }
// let canvas = ref(null)
// let scene  = reactive(null)
// let camera = reactive(null)
// let renderer  = reactive(null)
// let controls = reactive(null)
// let axesHelper = reactive(null)
// let controlData = reactive({
//   rotationSpeed:0.01,
//   color:'#66ccff',
//   wireframe:false,
//   envMap:'无'
// })
// let gui =new dat.GUI()
// let f = gui.addFolder('配置');
//  f.add(controlData,"rotationSpeed",0.01,0.1,0.01)
//    f.addColor(controlData,'color')
//    //下拉列表
//    f.add(controlData,'envMap',['无','全反射','漫反射','环境贴图'])
//    f.add(controlData,'wireframe')
//    f.domElement.id='gui'
// scene = new THREE.Scene();
//   camera = new THREE.PerspectiveCamera(
//   70,
//   window.innerWidth / window.innerHeight,
//   0.01,
//   100
// );
// camera.position.set(3, 3, 3);
// // camera.lookAt(2,0,0);
// scene.add(camera);
// // 创建几何体
// const cubeGeometry = new THREE.BoxGeometry(0.3, 0.3 ,0.3);
// const cubeMaterial = new THREE.MeshBasicMaterial();
// // 根据几何体和材质创建物体
// const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// cube.position.set(0.5, 0.3 ,0)
// // 将几何体添加到场景中
// scene.add(cube);
// const cubeGeometry2 = new THREE.BoxGeometry(0.7, 0.6, 0.5);
// const cubeMaterial2 = new THREE.MeshBasicMaterial();
// const cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
// cube2.position.set(1,1,1)
// scene.add(cube2);
// renderer = new THREE.WebGLRenderer({antialias:true});
// renderer.setSize(window.innerWidth, window.innerHeight);
// const animate=()=>{
//   requestAnimationFrame(animate)
//   // cube.rotation.x+=0.01
//   // cube.rotation.y+=0.01
//   cube2.rotation.x+= controlData.rotationSpeed
//   // cube2.rotation.y+= controlData.rotationSpeed
//   cube2.material.color= new THREE.Color(controlData.color) 
//   cube2.material.wireframe =controlData.wireframe
//   renderer.render(scene, camera);
// }
// const render=()=>{
//   renderer.render(scene, camera);
//   requestAnimationFrame(render);
// }
// onMounted(()=>{
//   canvas.value.appendChild(f.domElement)
//    canvas.value.appendChild(renderer.domElement);
//    controls = new OrbitControls(camera, renderer.domElement);
//    axesHelper = new THREE.AxesHelper(10);
//    scene.add(axesHelper);
//    f.open()
//   render()
//   animate()
// })
</script>

<template>

    <!-- <iKIcons @click="changes"  type="icon-xiazai1">1</iKIcons>
    <iKChechbox v-model="te" :disabled="false"  ></iKChechbox>
    <ikTable style="height: 500px;"/> -->
    <div ref="canvas" class="canvas-container"></div>
</template>

<style >
.canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#gui{
 position: absolute;
 right: 0;
 width: 300px;
}
</style>
